<template>
	<div class="index" style="background: rgb(246, 248, 251);" >
    <van-nav-bar title="订单" left-arrow  @click-left="onClickLeft" />
    <div style=" padding:0.3rem;">
      <div class="flexcc" style="padding: 0.6rem 0;"><img src="../../../static/img/chadan2.png" style="width: 1.7rem;"></div>
      <div style="padding:0 0.2rem;">
        <div style="color: rgb(64, 66, 71); font-size: 0.24rem; margin-bottom: 0.2rem;">收货电话</div>
        <div style="margin-bottom: 0.5rem;">
          <van-field v-model="all.mobile" placeholder="请输入联系方式" style="background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 0.2rem;" />
        </div>

        <div style="color: rgb(64, 66, 71); font-size: 0.24rem; margin-bottom: 0.2rem;">购卡者身份证后4位</div>
        <div style="margin-bottom: 0.5rem;">
          <van-field v-model="all.id_card_num" maxlength="4" placeholder="请输入购卡者身份证后4位" style="background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 0.2rem;" />
        </div>
        <!-- <div class="flexc" style="justify-content: space-around;">
          <van-field v-model="all2.mobile1" type="number" @input="changes(1)" ref="m1" placeholder="" style="background: rgb(246, 248, 251); width: 46px; border: 1px solid rgb(227, 232, 241); border-radius: 0.2rem;" />
          <van-field v-model="all2.mobile2" type="number" @input="changes(2)" ref="m2" placeholder="" style="background: rgb(246, 248, 251); width: 46px; border: 1px solid rgb(227, 232, 241); border-radius: 0.2rem;" />
          <van-field v-model="all2.mobile3" type="number" @input="changes(3)" ref="m3" placeholder="" style="background: rgb(246, 248, 251); width: 46px; border: 1px solid rgb(227, 232, 241); border-radius: 0.2rem;" />
          <van-field v-model="all2.mobile4" type="number" @input="changes(4)" ref="m4" placeholder="" style="background: rgb(246, 248, 251); width: 46px; border: 1px solid rgb(227, 232, 241); border-radius: 0.2rem;" />
        </div> -->

        <div @click="xiadan" style="background: rgb(0, 90, 255); border-radius: 0.15rem; font-size: 0.28rem; width: 100%; height: 0.9rem; color: #fff; margin-top: 1rem;" class="flexcc">查询订单</div>
      </div>
    </div>
	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'query',
		data() {
			return {
        all:{
          mobile:"",
          id_card_num:""
        },
        all2:{}
			}
		},
		created() {

		},
		mounted() {
      document.title = "订单查询"
		},
		methods: {
      changes:function(v){

        if(v == 1){
          this.$nextTick(()=>{
            if(this.$refs.m1.$refs.input._value){
              this.$refs.m2.focus()
            }
          })
        }
        if(v == 2){
          this.$nextTick(()=>{
            if(this.$refs.m2.$refs.input._value){
              this.$refs.m3.focus()
            }
          })
        }
        if(v == 3){
          this.$nextTick(()=>{
            if(this.$refs.m3.$refs.input._value){
              this.$refs.m4.focus()
            }
          })
        }

      },
      xiadan:function(){
        // this.all.id_card_num = this.all2.mobile1 + this.all2.mobile2 + this.all2.mobile3 + this.all2.mobile4

        axios.get('/api/search/order',{params:this.all}).then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.length == 0){
              vant.Toast('没有查询到订单');
            }else{
              this.$router.push('/query_order2?mobile='+this.all.mobile+'&id_card_num='+this.all.id_card_num)
            }
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      onClickLeft:function(){
        this.$router.back(-1)
      },
		}
	}
</script>


<style scoped lang="less">
  .index{
    .af{ position: relative; z-index: 2;
      &:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 6px;
        background: rgb(232, 237, 252);
        z-index: -1;
      }
    }
  }
</style>
